<template>
  <div class="footer">
    <div class="footer-container">
      <div class="footer-description">
        <div class="footer-logo">
          <img :src="logoUrl" width="50" height="50" alt="Your Website Logo" class="logo" />
          <span><strong>Your Website Name</strong></span>
        </div>
        <p class="description">{{ websiteDescription }}</p>
      </div>
      <div class="footer-content">
        <div v-for="(section, index) in footerSections" :key="index" class="footer-section">
          <h3>{{ section.title }}</h3>
          <ul>
            <li v-for="(link, linkIndex) in section.links" :key="linkIndex">
              <NuxtLink :to="link.url">{{ link.text }}</NuxtLink>
            </li>
          </ul>
        </div>
      </div>
      <hr class="footer-divider" />
      <div class="copyright">&copy; 2024 Your Website Name. All rights reserved.</div>
    </div>
  </div>
</template>

<script setup lang="ts">
const logoUrl = ref("/logo.png");
const websiteDescription = ref("欢迎来到智慧导航网，您的全能网络指南。我们精心汇编了全球最新资讯、科技趋势、文化探索与生活窍门，旨在为您每日的生活与工作注入灵感。一键触达热门站点，发现未曾触及的知识角落；个性推荐，让每一次点击都充满价值。智慧导航，与您一起学习成长，探索世界之美，让信息获取更高效，生活更精彩。");
const footerSections = ref([
  {
    title: "分组",
    links: [
      { text: "测试测试", url: "/grouping/1" },
      { text: "测试测试", url: "/grouping/2" },
      { text: "测试测试", url: "/grouping/3" },
      { text: "测试测试", url: "/grouping/4" },
    ],
  },
  {
    title: "卡片",
    links: [
      { text: "测试测试", url: "/card/1" },
      { text: "测试测试", url: "/card/2" },
      { text: "测试测试", url: "/card/3" },
      { text: "测试测试", url: "/card/4" },
    ],
  },
  {
    title: "测试",
    links: [
      { text: "测试", url: "/Inquire/person" },
      { text: "测试", url: "/Inquire/type" },
      { text: "测试测", url: "/Inquire/family" },
    ],
  },
  {
    title: "测试测试",
    links: [
      { text: "测试 HB 测试测", url: "https://vuejs.org/" },
      { text: "HB 测试", url: "/appraise" },
      { text: "测试测试", url: "https://vuejs.org/" },
      { text: "测试 HB 测试测", url: "https://vuejs.org/" },
      { text: "HB 测试", url: "https://vuejs.org/" },
      { text: "测试测试", url: "https://vuejs.org/" },
      { text: "测试 HB 测试测", url: "https://vuejs.org/" },
    ],
  },
]);
</script>

<style scoped>
.footer {
  background-color: #333;
  color: #fff;
  padding: 2rem 0;
  text-align: center;
  width: 100%;
  display: flex;
  justify-content: center;
}

.footer-container {
  width: 1600px;
}

.footer-description {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.footer-logo {
  display: flex;
  align-items: center;
  width: 800px;
}

.logo {
  margin-right: 20px;
}

.description {
  width: 800px;
  text-align: left;
}

.footer-content {
  display: flex;
  justify-content: space-around;
}

.copyright {
  text-align: center;
  margin-top: 1rem;
}

.footer-divider {
  border: none;
  height: 1px;
  background-color: #666; /* 分界线颜色，可自定义 */
  margin: 20px 0; /* 上下间距，可自定义 */
}

ul {
  text-align: left;
}

li {
  padding: 10px 0;
}

a {
  color: #fff;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  color: #409eff;
}
</style>
